<template>
  <!--  头部  -->
    <div class="header">
        <div style="width: 1500px;height: 100%;margin:0 auto">
            <el-row :gutter="20">
                <el-col :span="6" style="text-align: center;display: flex">
                    <p style="font-size: 28px;font-weight: bolder;font-family: 华文彩云;color: #333">智慧餐厅</p>
                    <a @click="router.push('/index')" class="header_a">首页</a>
                </el-col>
                <el-col :span="9">
                    <div style="height: 100%;width: 100%;display: flex;align-items: center;justify-content: center">
                        <input v-model="search_global_input" @keydown.enter="search_content" style="position:relative;left: 80px" placeholder="请在此输入内容"/>
                        <el-icon class="el-icon-search" @click="search_content"
                                 style="box-sizing: border-box;background-color: rgba(83,167,216,0.2);height: 40px;width: 60px;border: 1px solid #53a7d8;border-left: none;color: #0aa1ed">
                            <Search/>
                        </el-icon>
                    </div>
                </el-col>
                <el-col :span="9" style="position: relative;left: 30px">
                    <div style="position: absolute;right: 10px;height: 100%;display: flex;align-items: center;">
                        <span class="span_item" @click="router.push('/meal')" v-if="store.state.global_branch_Id!==0">
                            <img src="/imgs/icon/back.svg" width="20px" style="vertical-align: bottom"/>
                            返回餐厅
                        </span>
                        <span class="span_item" @click="router.push('/myChat')" v-if="store.state.global_branch_Id!==0">
                            <img src="/imgs/icon/ser.svg" width="20px" style="vertical-align: bottom"/>
                            客服
                        </span>
                        <span class="span_item" @click="to_my_message">
                            <img src="/imgs/icon/message.svg" width="18px" style="vertical-align: bottom"/>
                            预约
                        </span>
                        <span class="span_item" @click="to_my_orders">
                            <img src="/imgs/icon/order.svg" width="17px" style="vertical-align: bottom;position: relative;bottom: 1px"/>
                            订单
                        </span>
                        <span class="span_item" @click="to_my_shopping_cart">
                            <img src="/imgs/icon/cart.svg" width="18px" style="vertical-align: bottom"/>
                            购物车
                        </span>
                        <el-badge style="position: absolute;left:370px;bottom: 40px" v-if="shopping_cart_arr.length!==0" class="mark" :value="shopping_cart_arr.length"/>

                        <el-dropdown>
<!--                            <el-icon class="el-icon-s">
                                <Avatar/>
                            </el-icon>-->
                            <el-avatar @click="to_my_info" style="margin-left: 30px; margin-right:25px;cursor: pointer">{{user.username}}</el-avatar>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="to_my_info">个人信息</el-dropdown-item>
                                    <el-dropdown-item @click="to_my_comment">我的评价</el-dropdown-item>
                                    <el-dropdown-item @click="log_out">退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                    </div>
                </el-col>
            </el-row>
        </div>



    </div>
  <!--  导航栏  -->
<!--    <div class="nav">

    </div>-->
  <!--  主体内容  -->
    <div class="main">
        <router-view/>
    </div>
</template>

<script setup>
import {Search} from '@element-plus/icons-vue'
import {computed, inject, onMounted, ref, watch} from "vue";
import {useStore} from 'vuex'
import router from "@/router";

//搜索框
const search_global_input = ref('')
const user = ref(getUser())
//购物车记录数组
const shopping_cart_arr = computed(() => store.state.global_shopping_cart_arr)
//const shopping_cart_arr = ref(store.state.global_shopping_cart_arr)

const store = useStore()
const search_content = ()=>{
    store.state.search_global=search_global_input.value
    store.state.search_i+=1//解决当搜索框中的值与上次相同时无法触发监听函数的问题
}

//监听购物车记录
/*watch(() =>store.state.global_shopping_cart_arr,(newValue,oldValue)=> {
    if(newValue!==oldValue){

    }

},{ immediate: false })*/

onMounted(()=>{
    //watch监听路由改变
    watch(() =>router.currentRoute.value.path,(newValue,oldValue)=> {
        //console.log('watch',newValue);
        if(newValue!==oldValue){
            store.state.search_global=''
            search_global_input.value=''
        }
    },{ immediate: false }/*初始化时不触发*/)

})
//我的购物车
const to_my_shopping_cart = ()=>{
    router.push("/myShoppingCart")
}

//我的信息
const to_my_info = ()=>{
    router.push('/myself')
}
// 我的评价
const to_my_comment = ()=>{
    router.push('/myComment')
}
//我的消息
const to_my_message = ()=>{
    router.push('/myMessage')
}
// 我的订单
const to_my_orders = ()=>{
    router.push('/myOrders')
}


//退出登录
const log_out = ()=>{
    localStorage.removeItem('user')
    router.push('/login')
}

</script>

<style scoped>
/**************header头部固定内容******************/
.header {
    position: fixed;
    margin: 0 auto;
    top: 0;
    height: 100px;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    //border-bottom: 0.01em solid rgba(102, 102, 102, 0.58);
    //background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    //background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);

}

.header_a{
    font-size: 17px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    margin-top: 32px;
    margin-left: 50px;
    color: #333;

}
.header_a:hover{
    color: #0aa1ed;
    cursor: pointer;
}

.header input {
    width: 300px;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border: 1px solid #53a7d8;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    border-right: none;
    box-sizing: border-box;
    font-size: 16px;
    font-family: Arial;
    color: #666;
}

.header input:focus {
    outline-style: none;
    border: 1px solid #53a7d8;
    border-right: none;
}
.el-icon-search{
    position:relative;
    left: 80px;
    margin-right: 30px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
.el-icon-search:hover{
    font-size: 25px;
    cursor: pointer;

}

.el-icon-s {
    margin-left: 30px;
    font-size: 20px;
    color: #595959;
}
.el-icon-s:hover{
    color: #0a9eed;
    border: 0;
    cursor: pointer;
}

.span_item{
    height: 32px;
    padding: 5px;
    margin-left: 20px;
    font-family: 微软雅黑;
    font-size: 15px;
    color: #666;
    cursor: pointer;
    position: relative;
    top: 2px;
    box-sizing: border-box;
    //transition: 0.3s;
}
.span_item:hover{
    //color: #0a9eed;
    //background-color:#e8e8e8;
    //border-radius: 5px;
    //border-bottom: solid 2px #0a9eed;
    //transform: scale(1.2);
}
.span_item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px; /* 与border-bottom的宽度相同 */
    background-color: #0a9eed; /* 下划线的颜色 */
    transition: width 0.2s ease-in-out; /* 动画时间和效果 */
    visibility: hidden; /* 初始隐藏 */
}

.span_item:hover::after {
    visibility: visible; /* 鼠标悬停时显示 */
    width: 100%; /* 下划线扩展到整个元素宽度 */
}

/*取消下拉菜单鼠标移入时的边框*/
:deep(.el-tooltip__trigger:focus-visible) {
    outline: unset;
}



/***************main可变区域****************/
.main{
    margin: 100px auto 0;
    height: calc(100vh - 100px);
    width: 100%;
    overflow-y: hidden;
    //overflow: auto;

}


</style>